<template>
  <view class="prolist">
    <el-button type="primary" @click="openProList" style="margin-bottom: 10px" v-show="!readonly">
      + {{ $t(`global.record`) }}
    </el-button>
    <el-row :gutter="10" type="flex">
      <el-col v-for="(item, index) in modelValue" :key="index" :span="24">
        <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }" @click="productDetil(item)">
          <view>
            <view><span class="card-number">{{ item.number }}</span></view>
            <view>
              <view class="card-label">{{ $t(`ProductFrom.productName`) }}</view><span>{{ item.goods }}</span>
            </view>
            <view>
              <view class="card-label">{{ $t(`ProductFrom.specification`) }}</view><span>{{ item.specification }}</span>
            </view>
            <view>
              <view class="card-label">{{ $t(`ProductFrom.measurementUnit`) }}</view><dict-tag
                :type="DICT_TYPE.HKB_GOODS_UNIT" :value="item.unit" />
            </view>
          </view>
          <view class="header">
            <view class="card-header">
              <el-button :icon="Close" circle @click.stop="deletePro(index)" v-show="!readonly" />
            </view>
            <view @click.stop>
              <el-image :src="item.coverpath" :preview-src-list="[item.coverpath]" style="width: 135px; height: 135px" />
            </view>
          </view>
        </el-card>
      </el-col>
    </el-row>

  </view>
</template>

<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'
import { ref } from 'vue'

import { DICT_TYPE } from '@/utils/dict'
import type { goodsVO } from '../../types'
import { Navigate } from '@/utils';
import Storage from "@/modal/useStorage";
import { useI18n } from "vue-i18n" // 使用vue-i18n的useI18n方法
// defineOptions({ name: 'proList' })
const productDetil = (item: any) => {
  Storage.set('productDetail', { product: item, isAdd: false, isEdit: false })
  Navigate.to('/pages/hkb/product/detail')
}
const props = defineProps({
  modelValue: Array<goodsVO>,
  readonly: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])

const selectGoods = ref()
// getter
watch(
  () => props.modelValue,
  () => (selectGoods.value = props.modelValue),
  { immediate: true }
)

//打开商品列表
const openProList = async () => {
  Storage.set('selectGoods', selectGoods.value)
  Navigate.to('/pages/hkb/components/proList/choseProduct')
}

const deletePro = (index: number) => {
  selectGoods.value?.splice(index, 1)
}
onShow(() => {
  selectGoods.value = Storage.get('selectGoods')
  emit('update:modelValue', selectGoods.value)
})
</script>

<style scoped lang="scss">
.prolist {
  width: 100%;
}

.box-card ::v-deep .el-card__body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box-card {
  position: relative;
  margin-bottom: 10px;
  height: 135px;

  overflow: visible;

  .card-header {
    position: absolute;
    z-index: 20;
    top: 0rpx;
    right: 0rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16rpx;
    display: block;
  }

  .header {
    .label {
      padding: 0 3px;
      background-color: #fdf0da;
      color: #f19901;
    }

    .header-label {
      padding-left: 10px;
    }
  }

  .card-number {
    font-size: 14px;
    margin-left: 15px;
  }

  .card-label {
    color: rgb(158, 158, 158);
    display: inline-block;
    font-size: 13px;
    margin: 0 10px 0 15px;

    &+span {
      width: 320rpx;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      text-overflow: ellipsis;
    }
  }
}

::v-deep th.el-table__cell,
::v-deep td.el-table__cell {
  // 设置position 使得 子元素不与其产生新的层叠关系
  position: static;
}


</style>
